<template>
    <LayoutSearchP />

    <div class="page">
        <swiperP :list="bannerList" :height="400"> </swiperP>

        <div class="container">
            <!-- 作品分类 -->
            <div class="radio-container">
                <RadioButtonGroupP line v-model="tabActive" :list="tabList" />
            </div>

            <template v-if="tabActive == 1">
                <template v-if="pagination.page <= 1">
                    <template v-if="updateList.length">
                        <div class="cell-title">
                            <div class="title">最近更新</div>
                        </div>
                        <WorksGroupP2 :list="updateList" />
                    </template>
                    <div class="cell-title">
                        <div class="title">推荐作品</div>
                    </div>
                    <WorksGroupP2 :list="topList" />
                    <div class="cell-title">
                        <div class="title">百年院校</div>
                    </div>
                    <WorksGroupP2 :list="academyList" />
                    <div class="cell-title">
                        <div class="title">知名企业</div>
                    </div>
                    <WorksGroupP2 :list="famousList" />
                    <div class="cell-title">
                        <div class="title">热门作品</div>
                    </div>
                    <WorksGroupP2 :list="renderHotList" />
                </template>
            </template>

            <template v-if="tabActive == 2">
                <template v-if="pagination.page <= 1">
                    <template v-if="updateList2.length">
                        <div class="cell-title">
                            <div class="title">最近更新</div>
                        </div>
                        <WorksGroupP2 :list="updateList2" />
                    </template>
                    <template v-if="xiaofangList.length">
                        <div class="cell-title">
                            <div class="title">消防作品</div>
                        </div>
                        <WorksGroupP2 :type="4" :list="xiaofangList" />
                    </template>
                    <template v-if="dianliList.length">
                        <div class="cell-title">
                            <div class="title">电力作品</div>
                        </div>
                        <WorksGroupP2 :type="6" :list="dianliList" />
                    </template>
                    <template v-if="yejinList.length">
                        <div class="cell-title">
                            <div class="title">冶金作品</div>
                        </div>
                        <WorksGroupP2 :type="7" :list="yejinList" />
                    </template>
                </template>
            </template>

            <div class="cell-title">
                <div class="title">更多作品</div>
                <div class="tools">
                    <div class="tool-item" v-for="item in sortList" :key="item.name" @click="onSort(item.name)">
                        {{ item.text }}
                        <img class="icon" :src="`${_oss_}images/${item.name != sortName
                            ? 'icon-sort'
                            : 'icon-' + sortType
                            }.png`" />
                    </div>
                </div>
            </div>

            <WorksGroupP2 :loading="isLoading" :list="renderList" :type="tabActive" />

            <div class="pagination" v-show="isShowPagination">
                <el-pagination background layout="prev, pager, next, jumper" :total="listTotal" :page-size="pagination.size"
                    prev-text="上一页" next-text="下一页" @current-change="onPageChange" />
            </div>
        </div>
    </div>

    <LazyLayoutFooterP />
</template>
<script setup>
import { useContent } from ".";
const cacheStore = useCacheStore();

const {
    updateList,
    updateList2,
    list,
    list2,
    tabActive,
    tabList,
    topList,
    hotList,
    yejinList,
    dianliList,
    xiaofangList,
    famousList,
    renderList,
    bannerList,
    academyList,
    isLoading,
    pagination,
    sortList,
    sortName,
    sortType,

    onPageChange,
    onSort,
    GetNewList,
    GetTopList,
    GetHotList,
    GetFamousList,
    GetBannerList,
    GetAcademyList,
    GetOtherList,
    GetUpdateList
} = useContent();

// 处理热门热门作品
const renderHotList = computed(() => {
    return hotList.value.sort((a, b) => b.page_view - a.page_view);
});

const listTotal = computed(() => {
    return tabActive.value == 1 ? list.value.length : list2.value.length;
});

const isShowPagination = computed(() => {
    return listTotal.value > pagination.value.size;
});

watch(() => cacheStore.key, async () => {
    await Promise.all([GetBannerList(183), GetTopList()]);
    GetNewList();
    GetAcademyList();
    GetFamousList();
    GetHotList();
    GetUpdateList(1, updateList);
})

await Promise.all([GetBannerList(183), GetTopList()]);
GetNewList();
GetAcademyList();
GetFamousList();
GetHotList();
GetUpdateList(1, updateList);
</script>
<style lang="scss" scoped>
.page {
    background-color: #f5f6fa;
}

.bg {
    width: 100%;
    height: 400px;
    background: url("https://yzpt-resources.oss-cn-hangzhou.aliyuncs.com/web/images/template/bg.jpg") no-repeat 50% 0 / cover;
    z-index: 10;
}

.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 0 90px;
}

.tools-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .page-title {
        color: #333;
        font-weight: 600;
        font-size: 28px;
    }
}

.cell-title {
    display: flex;

    margin-bottom: 31px;
    margin-top: 46px;

    .title {
        font-size: 28px;
        color: #333;
        font-weight: bold;
    }

    .tools {
        display: flex;
        margin-left: 30px;
        align-self: flex-end;
        user-select: none;

        .tool-item {
            display: flex;
            align-items: center;
            font-size: 16px;
            margin-right: 30px;
            cursor: pointer;

            .icon {
                width: 14px;
                height: 14px;
                margin-left: 3px;
            }
        }
    }
}

.radio-button-group {
    margin-top: 26px;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 19px;
    user-select: none;

    :deep(.el-pager) {
        li {
            width: 32px;
            height: 30px;
            border-radius: 6px;
            background-color: #fff;
            font-size: 16px;
            font-weight: 500;
        }
    }

    :deep(.el-pagination) {
        &.is-background {

            .btn-next,
            .btn-prev {
                background-color: #fff;
                padding: 0 10px;
                border-radius: 6px;
            }
        }
    }
}
</style>
